<template>
  <view class="userInfo-component">
    <view class="user-name">唯品会会员</view>
    <view class="content-box">
      <view class="user-logo">
        <image class="image-style" src="/static/user.jpg"></image>
        <text class="text-logo">V值 250</text>
      </view>

      <view class="right-box">
        <view class="box">
          <view class="left-box">
            <view class="text-box">
              <text class="title">开通超V年卡</text>
              <text class="des">预计年省¥825</text>
            </view>
            <view class="btn-style">立即开通</view>
          </view>
          <view class="image-box">
            <image src="/static/common/weipinhui/user002.gif"></image>
          </view>
        </view>
        <view class="box">
          <view class="left-box">
            <view class="text-box">
              <text class="title">开通超V年卡</text>
              <text class="des">预计年省¥825</text>
            </view>
            <view class="btn-style">去看看</view>
          </view>
          <view class="image-box">
            <image src="/static/common/weipinhui/user001.png"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";

export default defineComponent({
  name: "",
  props: {},
  components: {},
  setup() {
    const data = reactive({});
    return {
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
.userInfo-component {
  width: 100%;
  padding: 15rpx;
  padding-top: 80rpx;
  box-sizing: border-box;
  position: relative;
  .content-box {
    width: 100%;
    background: url("/static/common/weipinhui/userInfo.png");
    height: 180rpx;
    padding: 10rpx;
    padding-right: 20rpx;
    box-sizing: border-box;
    background-size: 100% 100%;
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    position: relative;
  }
  .user-logo {
    position: absolute;
    top: -76rpx;
    left: 30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    .image-style {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      display: block;
    }
    .text-logo {
      position: relative;
      z-index: 1;
      font-size: 18rpx;
      background: #3d3635;
      color: #948f8f;
      margin-top: -10rpx;
    }
  }
  .user-name {
    position: absolute;
    top: 14rpx;
    left: 192rpx;
    color: #fff;
  }
  .right-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 530rpx;
    height: 100%;
    .box {
      height: 100%;
      flex: 1;
      display: flex;
      justify-content: space-between;
      background: #fbf6f6;
      border-radius: 15rpx;
      margin-left: 10rpx;
      padding: 10rpx 6rpx;
      box-sizing: border-box;
      .left-box {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        .btn-style {
          width: 120rpx;
          background: linear-gradient(to right, #f8dac1, #f3af82);
          font-size: 20rpx;
          color: #2b2521;
          height: 34rpx;
          border-radius: 16rpx;
          line-height: 34rpx;
          text-align: center;
        }
        .text-box {
          display: flex;
          flex-direction: column;
          justify-content: center;
          .title {
            font-size: 22rpx;
          }
          .des {
            font-size: 20rpx;
          }
        }
      }
      .image-box {
        width: 110rpx;
        box-sizing: border-box;
        image {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
